<template>
  <view :class="['edu-filter', { filter: filter }]">
    <scroll-view class="scroll-list" scroll-y="true">
      <view
        :class="[
          'edu-item u-border-bottom',
          { active: item.value === activeEdu },
        ]"
        v-for="(item, index) in edus"
        :key="index"
        @click="handleEdu(item)"
      >
        {{ item.label }}
        <u-icon
          name="checkbox-mark"
          size="32"
          v-if="item.value === activeEdu"
        ></u-icon>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { eduList } from "@/utils/data";
export default {
  props: {
    formData: [String, Object, Number],
    propList: [Array, String],
    filter: Boolean,
  },
  data() {
    return {
      edus: eduList,
      activeEdu: null,
    };
  },
  watch: {
    formData: {
      handler(val) {
        if (val) {
          this.activeEdu = val;
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleEdu(item) {
      this.activeEdu = item.value;
      this.$emit("confirm", [item.value, item.label], this.propList);
    },
  },
};
</script>

<style lang="scss">
.edu-filter {
  &.filter {
    max-height: calc(60vh - 128rpx);
  }
  overflow: auto;
  .scroll-list {
    height: calc(60vh - 128rpx);
  }
  .edu-item {
    padding: 26rpx 32rpx;
    font-size: $uni-font-size-base;
    line-height: 54rpx;
    color: $uni-text-color-555;
    box-sizing: border-box;
    &.active {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: $u-type-primary;
    }
  }
}
</style>
